<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ::-webkit-scrollbar-thumb {
            background-color: #009688;
        }

        #region .cascader-all {
            width: 100% !important;
        }

        #region .cascader-input {
            width: 100% !important;
        }
    </style>
</head>
<body>
<div class="layui-tab-content">
    <div>
<!--        <div class="layui-input-inline" style="width: 300px;margin-right: 10px">-->
<!--            <input type="text" id="useRuleName" placeholder="规则名称" autocomplete="off"-->
<!--                   class="layui-input">-->
<!--        </div>-->
<!--        <div class="layui-input-inline">-->
<!--            <button type="submit" class="layui-btn" id="useRuleSearch">搜索</button>-->
<!--        </div>-->
<!--        <div class="layui-input-inline" style=" float: right;margin-right: 10%;">-->
<!--            <button type="submit" class="layui-btn layui-btn-normal" id="useRuleAdd">添加</button>-->
<!--        </div>-->
    </div>
    <table class="layui-hide" id="useRuleTable" lay-filter="useRuleTable"></table>
</div>
</body>

<script type="text/html" id="SelectShopEdit">
    <a class="layui-btn layui-btn-xs" lay-event="selectedShop" id="selectedShop">选择</a>
</script>

<!--<script type="text/html" id="RuleReviewedAuditShop">-->
<!--    <div class="layui-tab-content">-->
<!--        <div class="layui-input-inline" style="width: 300px;margin-right: 10px">-->
<!--            <input type="text" id="ruleReviewedAdoptSearchName" placeholder="请输入规则名称" autocomplete="off"-->
<!--                   class="layui-input">-->
<!--        </div>-->
<!--        <div class="layui-input-inline">-->
<!--            <button type="submit" class="layui-btn" id="ruleReviewedAdoptSearch">搜索</button>-->
<!--        </div>-->
<!--        <table class="layui-hide" id="ruleReviewedAuditShopTable" lay-filter="ruleReviewedAuditShopTable"></table>-->
<!--    </div>-->
<!--</script>-->


<!--<script type="text/html" id="useRuleForm">-->
<!--    <form class="layui-form"-->
<!--          style="padding-right: 10px;white-space:nowrap!important;margin-top: 20px;margin-right: 20px"-->
<!--          lay-filter="useRuleForm">-->
<!--        <input name="useRuleId" id="useRuleId" hidden="hidden">-->
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label required">规则名称:</label>-->
<!--            <div class="layui-input-block">-->
<!--                <input type="text" name="useRuleName" autocomplete="off" placeholder="请输入规则名称"-->
<!--                       class="layui-input" lay-verify="required">-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">指定店铺:</label>-->
<!--            <div class="layui-input-block">-->
<!--                <button type="button" class="layui-btn" id="selectShop">选择店铺</button>-->
<!--                <input type="text" id="shopId" name="shopId" placeholder="店铺" style="display: none" autocomplete="off"-->
<!--                       class="layui-input">-->
<!--            </div>-->
<!--        </div>-->
<!--        &lt;!&ndash;        <div class="layui-form-item">&ndash;&gt;-->
<!--        &lt;!&ndash;            <label class="layui-form-label">店铺类型：</label>&ndash;&gt;-->
<!--        &lt;!&ndash;            <div class="layui-input-block">&ndash;&gt;-->
<!--        &lt;!&ndash;                <select name="shopType" lay-filter="shopType" id="shopType">&ndash;&gt;-->
<!--        &lt;!&ndash;                </select>&ndash;&gt;-->
<!--        &lt;!&ndash;            </div>&ndash;&gt;-->
<!--        &lt;!&ndash;        </div>&ndash;&gt;-->
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">店铺类型:</label>-->
<!--            <div class="layui-input-block">-->
<!--                <div style="position: relative;-->
<!--    right: 20px;" id="shopType" name="shopType" class="xm-select-demo"></div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-form-item" id="region">-->
<!--            <label class="layui-form-label">所在地区:</label>-->
<!--            <div class="layui-input-block">-->
<!--                <cascader id="demo1"></cascader>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-form-item layui-form-text">-->
<!--            <label class="layui-form-label">规则描述:</label>-->
<!--            <div class="layui-input-block">-->
<!--                <textarea name="useRuleDescribe" id="useRuleDescribe" placeholder="请输入店铺名称"-->
<!--                          class="layui-textarea"></textarea>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-form-item" id="useRuleoBtn" style="margin-left: 110px;">-->
<!--            <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn" id="saveBtn">保存-->
<!--            </button>-->
<!--            <button type="button" class="layui-btn layui-btn-primary" id="closeBtn">取消</button>-->
<!--        </div>-->
<!--    </form>-->
<!--</script>-->
<script type="text/html" id="useRuleEdit">
<!--    <a class="layui-btn layui-btn-xs" lay-event="updateBtn">修改</a>-->
<!--    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delBtn">删除</a>-->
</script>
<script th:replace="/common/template :: script"></script>
<script th:inline="javascript">
    layui.config({
        base: '/lib/layui-v2.5.7/mods/ajaxCascader/'
        , version: '1.6'
    }).extend({
        xmSelect: '../xm-select'
    });

    layui.use(['jquery', 'ajaxCascader', 'laydate', 'layer', 'table', 'form', 'xmSelect'], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        var xmSelect = layui.xmSelect;
        var cascader = layui.ajaxCascader;
        var select;

        table.render({
            elem: '#useRuleTable'
            , url: '/vehicleScan/list'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {field: 'plate', title: '车牌号', align: 'center'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {field: 'vehicleType', title: '车辆类型', align: 'center'}
                , {field: 'ownerName', title: '姓名', align: 'center'}
                , {field: 'ownerAddr', title: '地址', align: 'center'}
                , {field: 'useType', title: '使用类型', align: 'center'}
                , {field: 'modelType', title: '品牌车型', align: 'center'}
                , {field: 'vin', title: '车辆识别代码', align: 'center'}
                , {field: 'engineNo', title: '发动机号', align: 'center'}
                , {field: 'regDate', title: '注册日期', align: 'center'}
                , {field: 'certDate', title: '发证日期', align: 'center'}
                // , {title: '操作', align: 'center', toolbar: '#useRuleEdit'}
            ]]
            , page: true
        });
        //添加
        $('#useRuleAdd').click(function () {
            showUseRule();
        })
        //搜索
        $('#useRuleSearch').click(function () {
            var searchName = $('#useRuleName').val();
            table.reload('useRuleTable', {where: {searchName: searchName}})
        })

        //修改
        table.on('tool(useRuleTable)', function (obj) {
            if (obj.event === 'updateBtn') {
                showUseRule(obj.data);
            } else if (obj.event === 'delBtn') {
                del(obj);
            }
        })

        function del(obj) {
            var y = $(window).height()-window.screen.height/2;
            layer.confirm('确定要删除吗？', {
                offset: y,
                skin: 'layui-layer-admin'

            }, function (i) {
                console.log(obj.data)
                if (obj.data.canDelete) {
                    layer.msg("该规则不能删除", {icon: 2});
                }
                layer.close(i);
                layer.load(2);
                $.ajax({
                    url: '/useRules/' + obj.data.useRuleId,
                    method: 'Post',
                    data: {_method: 'DELETE'},
                    success: function (res) {
                        layer.closeAll('loading');
                        if (res.code == 200) {
                            layer.msg(res.msg, {icon: 1});
                            obj.del();
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }
                })
            });
        }


        function showUseRule(data) {
            var index = layer.open({
                type: 1,
                maxmin: true,
                area: ['540px', '450px'],
                title: data ? '修改使用规则' : '新增使用规则',
                content: $('#useRuleForm').html(),
                success: function () {
                    // $.ajax({
                    //     url: '/shopsService/shops/getShopType',
                    //     method: 'get',
                    //     success: function (res) {
                    // //渲染select
                    // $('#shopType').append("<option value=''>请选择</option>")
                    // for (let i = 0; i < res.data.length; i++) {
                    //     if (data && data.useRuleProps && data.useRuleProps.shopType == res.data[i].value) {
                    //         $('#shopType').append(" <option selected value=\"" + res.data[i].value + "\">" + res.data[i].name + "</option>")
                    //     } else {
                    //         $('#shopType').append(" <option value=\"" + res.data[i].value + "\">" + res.data[i].name + "</option>")
                    //     }
                    // }
                    // layui.form.render('select');
                    // }
                    // })
                    var shopTypes = new Array();

                    if (data) {
                        form.val('useRuleForm', data);
                        if (data && data.useRuleProps && data.useRuleProps.shopId) {
                            $.ajax({
                                url: '/useRules/shopId/' + data.useRuleProps.shopId,
                                method: 'get',
                                success: function (res) {
                                    $('#shopId').val(data.useRuleProps.shopId);
                                    $('#selectShop').text(res.shopName);
                                }
                            })
                        }
                        if (data && data.useRuleProps && data.useRuleProps.rearId) {
                            $.ajax({
                                url: '/useRules/areaId/' + data.useRuleProps.rearId,
                                method: 'get',
                                success: function (res) {
                                    $('.cascader-input').val(res.areaName);
                                    $('.cascader-clear').show();
                                    $('.cascader-i').hide();
                                }
                            })
                        }
                        if (data && data.useRuleProps && data.useRuleProps.shopType) {
                            shopTypes = data.useRuleProps.shopType.split(',');
                            console.log(shopTypes);
                        }
                    }
                    loadSelect(shopTypes);
                    loadCity();
                    $('#selectShop').click(function () {
                        loadShopTable();
                    })
                    form.on('submit(saveBtn)', function (form) {
                        var areaIds = cascader.getChooseData('#demo1');
                        var rearId = areaIds ? areaIds.length === 0 ? '' : areaIds[areaIds.length - 1] : null;
                        // var formData = new FormData();
                        // formData.append("shopType",select.getValue('value'))
                        // var shopTypes =  form.field.select?form.field.select.split(','):null;
                        var json = {
                            'shopId': form.field.shopId,
                            // 'shopType': form.field.shopType,
                            'shopType': form.field.select,
                            'useRuleId': form.field.useRuleId,
                            'useRuleName': form.field.useRuleName,
                            'rearId': rearId,
                            'useRuleDescribe': form.field.useRuleDescribe
                        }
                        $.ajax({
                            url: '/useRules',
                            method: data ? 'Put' : 'Post',
                            data: json,
                            // processData: false,//用于对data参数进行序列化处理 这里必须false
                            // contentType: false, //必须
                            success: function (res) {
                                layer.closeAll();
                                if (res.code == 200) {
                                    layer.msg(res.msg, {icon: 1});
                                    table.reload('useRuleTable')
                                } else {
                                    layer.msg(res.msg, {icon: 2});
                                }
                            }
                        })


                        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                    });
                    $('#closeBtn').click(function () {
                        layer.close(index);
                    })
                }
            })
        }

        function loadSelect(shopTypes) {
            select = xmSelect.render({
                el: '#shopType',
                style: {
                    marginLeft: '20px',
                    // width: '80%',
                    height: '38px',
                }
            })
            $.ajax({
                url: '/shopsService/shops/getShopType',
                type: 'get',
                async: false,
                success: function (res) {
                    select.update({
                        initValue: shopTypes,
                        data: res.data
                    })

                }
            })
        }

        function loadCity() {
            // Ajax传参模式
            cascader.load({
                elem: '#demo1'
                , height: 38
                , search: {
                    show: true,
                    minLabel: 5,
                    placeholder: '点击选择位置'
                }
                , clear: true
                , showlast: true
                , value: 0
                , getChildren: function (value, callback) {
                    var data = []
                    $.ajax({
                        url: '/shopsService/shops/getAreaData/' + value,
                        type: 'get',
                        success: function (res) {
                            data = res.data;
                            for (var i in data) {
                                data[i].value = data[i].id;
                                data[i].label = data[i].name;
                                delete data[i].id;
                                delete data[i].name;
                                if (data[i].level == 4) {
                                    data[i].hasChild = false;
                                } else {
                                    data[i].hasChild = true;
                                }

                            }
                            callback(data);
                        }
                    });
                },
            });
        }

        function loadShopTable() {
            var index = layer.open({
                type: 1,
                area: ['750px', '600px'],
                maxmin: true,
                title: '选择店铺',
                content: $('#RuleReviewedAuditShop').html(),
                success: function () {
                    table.render({
                        elem: '#ruleReviewedAuditShopTable'
                        , url: '/shopReviewed/getReviewedAudit/'
                        , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                        , cols: [[
                            {field: 'shopName', title: '实体店名称', align: 'center'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                            , {field: 'shopTypeName', title: '店铺类型', align: 'center'}
                            , {field: 'contactsName', title: '联系人姓名', align: 'center'}
                            , {field: 'edit', title: '操作', align: 'center', toolbar: '#SelectShopEdit'}
                        ]]
                        , page: true
                    });

                    //审核成功的搜索
                    $('#ruleReviewedAdoptSearch').click(function () {
                        var searchName = $('#ruleReviewedAdoptSearchName').val();
                        table.reload('ruleReviewedAuditShopTable', {where: {searchName: searchName}})
                    })

                    table.on('tool(ruleReviewedAuditShopTable)', function (obj) {
                        if (obj.event === 'selectedShop') {
                            $('#shopId').val(obj.data.shopId);
                            $('#selectShop').text(obj.data.shopName);
                            layer.close(index);
                        }
                    })
                }
            })
        }

    })
</script>
</html>
